/* ---------- FileTree ----------*/
.file-tree {
    height: 100%;
    padding: 0px 0px 0px 4px;
    :global {
        .ant-tree .ant-tree-treenode {
            padding-bottom: 0;
            background-color: var(--Colors-Use-Basic-Background);
        }
        .ant-tree-list{
            background: var(--Colors-Use-Basic-Background)
        }
        .ant-tree-switcher {
            display: none;
        }
        .ant-tree .ant-tree-node-content-wrapper {
            padding: 0;
            line-height: normal;
            min-height: auto;
            border-radius: 0;
        }
        .ant-tree .ant-tree-node-content-wrapper:hover {
            background-color: transparent;
        }
        .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
            background-color: transparent;
        }
        .ant-tree.ant-tree-block-node .ant-tree-list-holder-inner .ant-tree-node-content-wrapper {
            flex: 1;
            overflow: hidden;
        }
        .ant-tree-indent-unit{
            width: 0px;
        }
        // 树的滚动条
        .ant-tree-list-scrollbar{
            width: 6px !important;
        }
        .ant-tree-list-scrollbar-thumb{
            background: var(--Colors-Use-Basic-Background) !important;
        }
    }

    :global(.ant-tree-treenode-loading) {
        .file-tree-node {
            .node-switcher {
                display: none;
            }
            .node-loading {
                display: flex;
            }
        }
    }
}

.tree-bottom{
    position: relative;
    height: 22px;
    text-align: center;
    color: var(--Colors-Use-Neutral-Disable);
    font-size: 11px;
    line-height: 22px;
}

/* ---------- FileTreeNode ----------*/
.file-tree-node {
    padding: 3px 12px 3px 8px;
    display: flex;
    align-content: center;
    gap: 2px;
    cursor: pointer;

    .node-switcher {
        width: 16px;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
            width: 16px;
            height: 16px;
            color: var(--Colors-Use-Neutral-Text-3-Secondary);
            transition: transform 0.3s;
        }
        &.expanded {
            svg {
                transform: rotate(90deg);
            }
        }
    }
    .node-loading {
        display: none;
        width: 16px;
        height: 16px;
        justify-content: center;
        align-items: center;
        svg {
            width: 12px;
            height: 12px;
            color: #f28b44;
        }
    }

    .node-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-content: center;

        .content-icon {
            height: 16px;
            margin-right: 2px;
            display: flex;
            align-items: center;
            img {
                width: 16px;
                height: 16px;
            }
        }
        .content-body {
            flex: 1;
            overflow: hidden;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            .file-tree-input-wrapper {
                height: 16px;
                .file-tree-input {
                    padding: 0px;
                    height: 16px;
                }
                input {
                    border: 0;
                }
            }
        }
    }

    &:hover {
        border-radius: 4px;
        background-color: var(--Colors-Use-Neutral-Bg);
    }

    &.node-selected {
        background-color: rgba(242, 139, 68, 0.06);
    }
    &.node-foucsed {
        border: 1px solid #f28b44;
        background-color: rgba(242, 139, 68, 0.06);
        border-radius: 4px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
